<template>
  <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
  <el-dialog v-model="addDialogVisible">
    <el-form :model="form">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.tel"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-tag v-for="tag in form.tags" :key="tag" closable :disable-transitions="false" @close="handleCloseAdd(tag)">
          {{ tag }}
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
          @keyup.enter="handleInputConfirmAdd" @blur="handleInputConfirmAdd" />
        <el-button v-else class="button-new-tag" size="small" @click="showInputAdd">
          + New Tag
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAddr">确认</el-button>
        <el-button @click="addDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="editDialogVisible">
    <el-form :model="editForm">
      <el-form-item label="姓名">
        <el-input v-model="editForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="editForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-tag v-for="tag in editForm.tags" :key="tag" closable :disable-transitions="false"
          @close="handleCloseEdit(tag)">
          {{ tag }}
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
          @keyup.enter="handleInputConfirmEdit" @blur="handleInputConfirmEdit" />
        <el-button v-else class="button-new-tag" size="small" @click="showInputEdit">
          + New Tag
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveEditAddr(editForm.id)">确认</el-button>
        <el-button @click="editDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-form @submit.prevent>
    <el-form-item label="搜索内容">
      <el-input v-model="sth" clearable @input="queryAddr"></el-input>
    </el-form-item>
  </el-form>

  <el-table :data="queryResult" stripe>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="电话" prop="tel"></el-table-column>
    <el-table-column label="标签">
      <template #default="scope">
        <el-tag v-for="tag in scope.row.tags" :key="tag" :disable-transitions="false">
          {{ tag }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" link @click="edit_addr(scope.row.id)">修改</el-button>
        <el-popconfirm title="确定删除？" @confirm="del_item(scope.row.id)">
          <template #reference>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import { reactive, nextTick } from "vue";
import { ElFormItem, ElInput, ElMessage } from "element-plus";

const sth = ref("");
const queryResult = ref();
const querySingle = ref();
const result = ref("");
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const inputVisible = ref(false);
const inputValue = ref('');
const InputRef = ref<InstanceType<typeof ElInput>>();
const form = reactive({
  name: '',
  tel: '',
  tags: [] as string[],
});
const editForm = reactive({
  id: 0,
  name: '',
  tel: '',
  tags: [] as string[],
});

async function addAddr() {
  result.value = await invoke("add_addr", { name: form.name, tel: form.tel, tags: form.tags });
  pop_message(result.value);
  queryResult.value = await invoke("query_addr", { sth: sth.value });
  console.log(queryResult.value);
  addDialogVisible.value = false;
  form.name = '';
  form.tel = '';
  form.tags = [];
}

async function queryAddr() {
  queryResult.value = await invoke("query_addr", { sth: sth.value });
}

onMounted(async () => {
  queryResult.value = await invoke("query_addr", { sth: "" });

  console.log(queryResult.value);
  console.log("mounted");
});

const del_item = async (id: number) => {
  console.log(id);
  result.value = await invoke("del_addr", { id: id });
  pop_message(result.value);

  queryResult.value = await invoke("query_addr", { sth: sth.value });
  console.log(queryResult.value);
}

const edit_addr = async (id: number) => {
  console.log(id);
  querySingle.value = await invoke("query_by_id", { id: id });
  console.log(querySingle.value);
  editForm.id = querySingle.value.id;
  editForm.name = querySingle.value.name;
  editForm.tel = querySingle.value.tel;
  editForm.tags = querySingle.value.tags;
  editDialogVisible.value = true;
}

const saveEditAddr = async (id: number) => {
  result.value = await invoke("edit_addr", { id: id, name: editForm.name, tel: editForm.tel, tags: editForm.tags });
  pop_message(result.value);
  queryResult.value = await invoke("query_addr", { sth: sth.value });
  console.log(queryResult.value);
  editDialogVisible.value = false;
  editForm.name = '';
  editForm.tel = '';
}

const pop_message = (msg: string) => {
  ElMessage({
    message: msg,
    type: 'success',
  })
}

// 添加tag使用的方法
const handleCloseAdd = (tag: string) => {
  form.tags.splice(form.tags.indexOf(tag), 1)
}

const showInputAdd = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirmAdd = () => {
  if (inputValue.value) {
    form.tags.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

// 编辑tag使用的方法
const handleCloseEdit = (tag: string) => {
  editForm.tags.splice(editForm.tags.indexOf(tag), 1)
}

const showInputEdit = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirmEdit = () => {
  if (inputValue.value) {
    editForm.tags.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>
